﻿<head>
	<script src="~/lib/vue/dist/vue.global.js"></script>
	<link href="~/lib/element-plus/dist/index.css" rel="stylesheet" />
	<script src="~/lib/element-plus/dist/index.full.js"></script>
	<script src="~/lib/axios/dist/axios.js"></script>
</head>
<div id="app">

	<form method="post" action="../customiz/customizAction!findAttribute">
		<table width="100%">
			<tr>
				<td>
					<font color="black">
						您正在做的业务是：人力资源--客户化设置--人力资源档案管理设置--职位分类设置
					</font>
				</td>
			</tr>
			<tr>
				<td align="right">
					<el-button v-on:click="tj">添加</el-button>
				</td>
			</tr>
		</table>
		<el-table :data="tableData" :header-cell-style="{background:'#FFDB6F',color:'#606266'}">
			<el-table-column prop="majorKindId" label="职位分类编号"></el-table-column>
			<el-table-column prop="majorKindName" label="职分类位名称"></el-table-column>
			<el-table-column label="删除">
				<template #default="scope">
					<el-button v-on:click="handleEdit(scope.row.mfkId)" type="text">
						删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
	</form>
	<el-dialog v-model="dialogVisibleAdd"
			   title="添加"
			   width="800">
		<span>
			<el-form :rules="rules" :model="from" label-width="auto" style="max-width: 750px">
				<el-form-item label="职位分类编号" prop="MajorKindId">
					<el-input v-model="from.MajorKindId" />
				</el-form-item>
				<el-form-item label="职分类位名称" prop="MajorKindName">
					<el-input v-model="from.MajorKindName" />
				</el-form-item>
				<el-form-item>
					<el-button v-on:click="dialogVisibleAdd = false">取消</el-button>
					<el-button type="primary" v-on:click="AddOk()">
						变更
					</el-button>
				</el-form-item>
			</el-form>

		</span>

	</el-dialog>
</div>
<script>
	var { createApp, reactive, ref } = Vue
	var app = createApp({
		setup() {
			let tableData = ref([])

			//查询
			function Fill() {
				axios.get('/GetCMK')
					.then(res => {
						tableData.value = res.data;
					})
			}
			Fill();
			//删除
			function handleEdit(mfkId) {
				if (confirm("确定要删除吗？")) {
					axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
					axios.post('/DeleteCMK', { id: mfkId }).then(res => {
						if (res.data) {
							Fill();
							alert("成功");
						}
					}).catch(err => {
						console.log(err);
					})
				}
			}
			let dialogVisibleAdd = ref(false);
			let from = reactive({
				MajorKindId:"",
				MajorKindName:""
			})
			//添加
			function tj(){
				dialogVisibleAdd.value = true;
			}
			const rules = {
				MajorKindId: [
					{ required: true, message: '不能为空', trigger: 'blur' },
					// 其他验证规则...
				],
				MajorKindName: [
					{ required: true, message: '不能为空', trigger: 'blur' },
					// 其他验证规则...
				]
				// 其他字段的验证规则...
			};
			function AddOk() {
				axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
				axios.post('/AddCMK', {
					MajorKindId: from.MajorKindId,
					MajorKindName: from.MajorKindName
				}).then(res => {
					if (res.data) {
						Fill();
						alert("成功");
						from.MajorKindId = "";
						from.MajorKindName = "";
						dialogVisibleAdd.value = false;
					}
				}).catch(err => {
					console.log(err);
				})
			}
			return {
				tableData,
				handleEdit,
				dialogVisibleAdd,
				tj,
				from,
				rules,
				AddOk
			}
		}
	})
	app.use(ElementPlus)
	app.mount("#app");
</script>
<style>
	/* CSS Document */
	* {
		FONT-FAMILY: 微软雅黑;
	}

	.resizeDivClass {
		position: relative;
		background-color: #DEDBD6;
		width: 2;
		z-index: 1;
		left: expression(this.parentElement.offsetWidth-1);
		cursor: e-resize;
	}

	A:visited {
		TEXT-DECORATION: none
	}

	A:active {
		TEXT-DECORATION: none
	}

	A:hover {
		TEXT-DECORATION: underline overline
	}

	A:link {
		TEXT-DECORATION: none
	}

	.t {
		LINE-HEIGHT: 1.4
	}

	BODY {
		background-color: #FFFFBB;
		border: 1px solid #FFDB6F;
	}

	TD {
		FONT-FAMILY: ??;
		FONT-SIZE: 9pt
	}

	DIV {
		FONT-FAMILY: ??;
		FONT-SIZE: 9pt
	}

	FORM {
		FONT-FAMILY: ??;
		FONT-SIZE: 9pt
	}

	OPTION {
		FONT-FAMILY: ??;
		FONT-SIZE: 9pt
	}

	P {
		FONT-FAMILY: ??;
		FONT-SIZE: 9pt
	}

	TD {
		FONT-FAMILY: ??;
		FONT-SIZE: 9pt
	}

	BR {
		FONT-FAMILY: ����;
		FONT-SIZE: 9pt
	}

	TEXTAREA {
		BACKGROUND-COLOR: #FFFFCC;
		BORDER-BOTTOM-COLOR: #000000;
		BORDER-BOTTOM-WIDTH: 1px;
		BORDER-LEFT-COLOR: #000000;
		BORDER-LEFT-WIDTH: 1px;
		BORDER-RIGHT-COLOR: #000000;
		BORDER-RIGHT-WIDTH: 1px;
		BORDER-TOP-COLOR: #000000;
		BORDER-TOP-WIDTH: 1px;
		FONT-FAMILY: ����;
		FONT-SIZE: 9pt
	}

	SELECT {
		BACKGROUND-COLOR: #FFFFCC;
		BORDER-BOTTOM-COLOR: #000000;
		BORDER-BOTTOM-WIDTH: 1px;
		BORDER-LEFT-COLOR: #000000;
		BORDER-LEFT-WIDTH: 1px;
		BORDER-RIGHT-COLOR: #000000;
		BORDER-RIGHT-WIDTH: 1px;
		BORDER-TOP-COLOR: #000000;
		BORDER-TOP-WIDTH: 1px;
		FONT-FAMILY: ����;
		FONT-SIZE: 9pt
	}

	.gray {
		CURSOR: pointer;
		FILTER: gray
	}

	.style3 {
		font-size: 16px;
		font-weight: bold;
	}

	.TABLE_STYLE1 {
		border: 1px solid;
		border-color: #000000;
		border-collapse: collapse;
		width: 100%;
	}

	.TABLE_STYLE2 {
		width: 100%;
	}

	.ALL-STYLE {
		border: 1px ridge #666666;
		border-color: #DEDBD6;
	}

	.TR_STYLE1 {
	}

	.style8 {
		color: #000066
	}



	.TD_HANDBOOK_STYLE1 {
		vertical-align: top;
		width: 100%;
		color: #0000FF;
	}

	.TD_STYLE1 {
		background-color: #FFDB6F;
		border-width: 1;
	}

	.TD_STYLE2 {
		border-spacing: 1px;
		background-color: #FFFFBB;
		border-color: #DEDBD6;
		border: 0;
	}

	.TD_STYLE3 {
	}

	.SUBMIT_STYLE1 {
		BORDER-RIGHT: #2C59AA 1px solid;
		PADDING-RIGHT: 2px;
		BORDER-TOP: #2C59AA 1px solid;
		PADDING-LEFT: 2px;
		FONT-SIZE: 12px;
		FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5);
		BORDER-LEFT: #2C59AA 1px solid;
		CURSOR: pointer;
		COLOR: black;
		PADDING-TOP: 2px;
		BORDER-BOTTOM: #2C59AA 1px solid
	}

	.BUTTON_STYLE1 {
		BORDER-RIGHT: #2C59AA 1px solid;
		PADDING-RIGHT: 2px;
		BORDER-TOP: #2C59AA 1px solid;
		PADDING-LEFT: 2px;
		FONT-SIZE: 12px;
		FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5);
		BORDER-LEFT: #2C59AA 1px solid;
		CURSOR: pointer;
		COLOR: black;
		PADDING-TOP: 2px;
		BORDER-BOTTOM: #2C59AA 1px solid
	}

	.RESET_STYLE1 {
		BORDER-RIGHT: #2C59AA 1px solid;
		PADDING-RIGHT: 2px;
		BORDER-TOP: #2C59AA 1px solid;
		PADDING-LEFT: 2px;
		FONT-SIZE: 12px;
		FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5);
		BORDER-LEFT: #2C59AA 1px solid;
		CURSOR: pointer;
		COLOR: black;
		PADDING-TOP: 2px;
		BORDER-BOTTOM: #2C59AA 1px solid
	}

	.RADIO_STYLE1 {
	}

	.CHECKBOX_STYLE1 {
	}

	.SELECT_STYLE1 {
		width: 100%;
	}

	.SELECT_STYLE2 {
		width: 30%;
	}

	.TEXTAREA_STYLE1 {
		width: 100%;
	}

	.DIV_STYLE1 {
		float: right;
		vertical-align: top;
	}

	.DIV_STYLE2 {
		float: center;
		vertical-align: top;
	}

	.INPUT_STYLE1 {
		BACKGROUND-COLOR: #FFFFCC;
		width: 30%
	}

	.INPUT_STYLE2 {
		BACKGROUND-COLOR: #FFFFCC;
		width: 100%
	}

	.FILE_STYLE1 {
		BORDER-RIGHT: #2C59AA 1px solid;
		PADDING-RIGHT: 2px;
		BORDER-TOP: #2C59AA 1px solid;
		PADDING-LEFT: 2px;
		FONT-SIZE: 12px;
		FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5);
		BORDER-LEFT: #2C59AA 1px solid;
		CURSOR: pointer;
		COLOR: black;
		PADDING-TOP: 2px;
		BORDER-BOTTOM: #2C59AA 1px solid
	}

	.btn3_mouseout {
		BORDER-RIGHT: #2C59AA 1px solid;
		PADDING-RIGHT: 2px;
		BORDER-TOP: #2C59AA 1px solid;
		PADDING-LEFT: 2px;
		FONT-SIZE: 12px;
		FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5);
		BORDER-LEFT: #2C59AA 1px solid;
		CURSOR: pointer;
		COLOR: black;
		PADDING-TOP: 2px;
		BORDER-BOTTOM: #2C59AA 1px solid
	}

	.btn3_mouseover {
		BORDER-RIGHT: #2C59AA 1px solid;
		PADDING-RIGHT: 2px;
		BORDER-TOP: #2C59AA 1px solid;
		PADDING-LEFT: 2px;
		FONT-SIZE: 12px;
		FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#D7E7FA);
		BORDER-LEFT: #2C59AA 1px solid;
		CURSOR: pointer;
		COLOR: black;
		PADDING-TOP: 2px;
		BORDER-BOTTOM: #2C59AA 1px solid
	}

	.btn3_mousedown {
		BORDER-RIGHT: #FFE400 1px solid;
		PADDING-RIGHT: 2px;
		BORDER-TOP: #FFE400 1px solid;
		PADDING-LEFT: 2px;
		FONT-SIZE: 12px;
		FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5);
		BORDER-LEFT: #FFE400 1px solid;
		CURSOR: pointer;
		COLOR: black;
		PADDING-TOP: 2px;
		BORDER-BOTTOM: #FFE400 1px solid
	}

	.btn3_mouseup {
		BORDER-RIGHT: #2C59AA 1px solid;
		PADDING-RIGHT: 2px;
		BORDER-TOP: #2C59AA 1px solid;
		PADDING-LEFT: 2px;
		FONT-SIZE: 12px;
		FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5);
		BORDER-LEFT: #2C59AA 1px solid;
		CURSOR: pointer;
		COLOR: black;
		PADDING-TOP: 2px;
		BORDER-BOTTOM: #2C59AA 1px solid
	}

	.custom-select .el-input__inner {
		background-color: transparent;
		border: 1px solid #ccc; /* 或者其他你想要的边框颜色 */
	}
</style>
<style>
	body {
		font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
		font-size: .8em;
	}

	/* the div that holds the date picker calendar */
	.dpDiv {
	}


	/* the table (within the div) that holds the date picker calendar */
	.dpTable {
		font-family: Tahoma, Arial, Helvetica, sans-serif;
		font-size: 12px;
		text-align: center;
		color: #505050;
		background-color: #ece9d8;
		border: 1px solid #AAAAAA;
	}


	/* a table row that holds date numbers (either blank or 1-31) */
	.dpTR {
	}


	/* the top table row that holds the month, year, and forward/backward buttons */
	.dpTitleTR {
	}


	/* the second table row, that holds the names of days of the week (Mo, Tu, We, etc.) */
	.dpDayTR {
	}


	/* the bottom table row, that has the "This Month" and "Close" buttons */
	.dpTodayButtonTR {
	}


	/* a table cell that holds a date number (either blank or 1-31) */
	.dpTD {
		border: 1px solid #ece9d8;
	}


	/* a table cell that holds a highlighted day (usually either today's date or the current date field value) */
	.dpDayHighlightTD {
		background-color: #CCCCCC;
		border: 1px solid #AAAAAA;
	}


	/* the date number table cell that the mouse pointer is currently over (you can use contrasting colors to make it apparent which cell is being hovered over) */
	.dpTDHover {
		background-color: #aca998;
		border: 1px solid #888888;
		cursor: pointer;
		color: red;
	}


	/* the table cell that holds the name of the month and the year */
	.dpTitleTD {
	}


	/* a table cell that holds one of the forward/backward buttons */
	.dpButtonTD {
	}


	/* the table cell that holds the "This Month" or "Close" button at the bottom */
	.dpTodayButtonTD {
	}


	/* a table cell that holds the names of days of the week (Mo, Tu, We, etc.) */
	.dpDayTD {
		background-color: #CCCCCC;
		border: 1px solid #AAAAAA;
		color: white;
	}


	/* additional style information for the text that indicates the month and year */
	.dpTitleText {
		font-size: 12px;
		color: gray;
		font-weight: bold;
	}


	/* additional style information for the cell that holds a highlighted day (usually either today's date or the current date field value) */
	.dpDayHighlight {
		color: 4060ff;
		font-weight: bold;
	}


	/* the forward/backward buttons at the top */
	.dpButton {
		font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
		font-size: 10px;
		color: gray;
		background: #d8e8ff;
		font-weight: bold;
		padding: 0px;
	}


	/* the "This Month" and "Close" buttons at the bottom */
	.dpTodayButton {
		font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
		font-size: 10px;
		color: gray;
		background: #d8e8ff;
		font-weight: bold;
	}
</style>